<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="dist/css/quicktab.css">
</head>

<body>
    <button id="btn">添加tab</button>
    <div id="qtab"></div>
    <script src="dist/js/quicktab.js"></script>
    <script>
        const qtab = new Quicktab('#qtab', {
            id: 'qtab',
            // 响应式设置(是针对的父容器)
            responsive: {
                enable: true,
                // 断点视口
                breakpoint: 576,
                // 小设备时想要隐藏的工具栏上的按钮 值是prev、refresh、next、fullscreen、dropdown
                hide: ['prev', 'next'],
            },
            //默认tab
            defaultTabs: [
                {
                    title: '欢迎页面',
                    url: 'welcome.html?id=10'
                },
                {
                    title: '管理员列表',
                    url: 'welcome.html?id=11'
                },
                {
                    title: '新增管理员',
                    url: 'welcome.html?id=12'
                },
                {
                    title: '角色列表',
                    url: 'welcome.html?id=14'
                }
            ],

            //tab工具栏配置
            toolbar: {
                // 搜索tab、打开的标签、最近关闭的标签
                dropdown: {
                    enable: true,
                },

                // 全屏
                fullscreen: {
                    enable: true,
                    //排序
                    order: 60,
                },
                //刷新按钮
                refresh: {
                    enable: true
                },
            },

            //tab配置
            tab: {
                //记忆(刷新tab不丢失)
                remember: true,

                //右键菜单配置
                contextmenu: {
                    enable: true
                },

                //鼠标滚轮切换tab
                mouseWheelSwitch: {
                    enable: true,
                },
                //关闭按钮
                closeBtn: {
                    enable: true
                },
                //当插件宽高改变时,当前激活的tab是否居中 false:不启用 true:启用
                resizeCenterActive: true,
                //tab单击时自动居中 false:不启用 true:启用
                clickCenterActive: true,

                //双击功能
                doubleClick: {
                    enable: true,
                    //默认tab双击是刷新功能,您也可以关闭刷新,在onTabDoubleClick事件中执行自己的逻辑
                    refresh: true,
                },

                //tab是否可以拖动排序  false:不启用 true:启用
                dragSort: true,
                //超时设置
                timeout: {
                    enable: true,
                },
                //tab加载层效果
                loading: {
                    enable: true,
                },
            }
        })

        let index = 1
        document.getElementById('btn').addEventListener('click', function () {
            qtab.addTab({
                url: 'welcome.html?page=' + index,
                title: '新选项卡' + index
            })
            index++
        })
    </script>
</body>

</html>